<template>
    <div class="SideLayout">
        <div class="layout_left">
          <SideMenu :iscollapse="iscollapse"/>
        </div>
        <div class="layout_right">
            <GlobalHeader v-model:iscollapse="iscollapse"/>
            <el-card class="box-card">
                <el-skeleton :loading="loading" :rows="15" animated >
                    <router-view></router-view>
                </el-skeleton>
            </el-card>
        </div>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref,onMounted} from 'vue';
    import SideMenu from "@/components/Menu/menu.vue";
    import GlobalHeader from "@/components/GlobalHeader/index.vue";
    export default defineComponent({
        name: 'SideLayout',
        components:{GlobalHeader,SideMenu},
        setup() {
            const  iscollapse = ref(false)
            const  loading = ref(true)
            onMounted(()=>{
                loading.value = false
            })
            return {iscollapse,loading};
        },
    });
</script>
<style lang="scss">
    .SideLayout{
        display: flex;
        width: 100vw;
        .layout_left{
            min-height: 100vh;
            background-color: #545c64;
        }
        .layout_right{
            flex: 1;
        }
    }
</style>
